<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素"类名"操作
		 addClass()                     有参：1个参和多个参
		                                语法：addClass（"类名"）
										<p class="类名">
										语法：addClass("类名")；
										<p class="类名1 类名2">
										功能：匹配元素集合中所有元素
										    添加一个或者多个类名操作
										理解：元素添加存在的样式
		 removeClass()                  功能：匹配元素集合中所有元素
										    移除一个或者多个类名操作
		 toggleClass()                  功能：如果元素有类名移除，没有则添加
		 hasClass()
		 -->
		 <!-- 要求：1.jq引入
		            2.html     div     id="targetElement"
					           4个按钮    id"addClassBtn"
							              id"removeClassBtn"
										  id"toggleclassBtn"
										  id"hasClassBtn"
								div id="resultArea"
					3.css:    .bgColor{  300*300   背景颜色
					          .borders{10个像素实现红色边框  倒角画图
			 -->
			 <script src="../js/jquery-1.11.1.js"></script>
			 <style>
				 .bgColor{
					 width: 300px;
					 height: 300px;
					 background: #23d686;
				 }
				 .broders{
					 border:10px solid #901ee0;
					 border-radius: 50%;
				
				 }
			 </style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleclassBtn">切换类名</button>
		<button id="hasClassBtn">检查类目是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1.点击  添加类名  按钮   添加效果【样式】 300*300  背景色红色
			$("#addClassBtn").click(function(){
				//div添加样式--存在样式
				$("#targetElement").addClass("bgColor broders");
				$("#resultArea").html("<h4>添加样式类名:bgColor</h4>")
			});
		
	//2.点击  添加类名  按钮  添加效果 【样式】
	//  300*300  背景红色 圆  外层 10px黄色框
	//3.点击 移除类名 按钮 添加效果 【样式】 300*300 背景颜色红色
		$("#removeClassBtn").click(function(){
				$("#targetElement").removeClass("broders");
				$("#resultArea").html("<h4>移除样式类名:bgColor</h4>")
			});
	//4.点击  切换类名  按钮  添加效果【样式】
	//300*300 背景元素红色 圆 外层 10px 黄色框
	$("#toggleclassBtn").click(function(){
			$("#targetElement").toggleClass("broders");
			$("#resultArea").html("<h4>切换样式类名:bgColor</h4>")
		});
	//5.点击  切换类名  按钮  添加效果【样式】
	// 去掉 300*300  背景色红色
	$("#toggleclassBtn").click(function(){
			$("#targetElement").toggleClass("bgColor");
			$("#resultArea").html("<h4>切换样式类名:bgColor</h4>")
		});
	//6.检查类名是否存在：true存在  false不存在
	$("#hasClassBtn").click(function(){
			var hc=$("#targetElement").hasClass("broders");
			$("#resultArea").text("检查当前样式是否存在："+hc)
		});
		</script>
	</body>
</html>